/**
 * 产品架构与创新点组件
 * 展示市场竞争现状分析、核心差异化优势和竞争优势对比
 */

import { motion } from "framer-motion";

interface ProductArchitectureSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function ProductArchitectureSection({ sectionRef }: ProductArchitectureSectionProps) {
    return (
        <section
            id="system-design"
            ref={sectionRef}
            className="py-20 bg-gray-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">产品架构与创新点</h2>
                </motion.div>

                {/* 市场竞争现状分析 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">市场竞争现状分析</h3>
                    
                    <div className="grid md:grid-cols-5 gap-6">
                        <div className="md:col-span-3 bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl">
                            <h4 className="text-lg font-bold text-indigo-800 mb-4">主要竞品情况</h4>
                            <ul className="space-y-4">
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                        <i className="fa-solid fa-building text-indigo-600"></i>
                                    </div>
                                    <div>
                                        <h5 className="font-semibold text-gray-800">北森AI面试官</h5>
                                        <p className="text-sm text-gray-600">7×24小时面试，评估一致性90%+，已落地300+企业</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                        <i className="fa-solid fa-search text-indigo-600"></i>
                                    </div>
                                    <div>
                                        <h5 className="font-semibold text-gray-800">智联招聘AI系统</h5>
                                        <p className="text-sm text-gray-600">VR虚拟环境、简历优化评分，行业薪资精准度92%</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                        <i className="fa-solid fa-comments text-indigo-600"></i>
                                    </div>
                                    <div>
                                        <h5 className="font-semibold text-gray-800">BOSS直聘</h5>
                                        <p className="text-sm text-gray-600">直聊+AI匹配模式，跳过传统简历筛选环节</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                        <i className="fa-solid fa-user-tie text-indigo-600"></i>
                                    </div>
                                    <div>
                                        <h5 className="font-semibold text-gray-800">猎聘AI工具</h5>
                                        <p className="text-sm text-gray-600">候选人筛选和"Doris"AI结构化面试产品</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                        <i className="fa-solid fa-cloud text-indigo-600"></i>
                                    </div>
                                    <div>
                                        <h5 className="font-semibold text-gray-800">各类SaaS平台</h5>
                                        <p className="text-sm text-gray-600">提供AI简历筛选、匹配推荐等功能</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        
                        <div className="md:col-span-2 bg-gradient-to-br from-red-50 to-orange-50 p-6 rounded-xl flex flex-col justify-center">
                            <h4 className="text-lg font-bold text-red-800 mb-4">市场痛点</h4>
                            <ul className="space-y-3">
                                <li className="flex items-start">
                                    <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                    <span className="text-sm text-gray-700">数据安全与隐私泄露风险</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                    <span className="text-sm text-gray-700">订阅费用持续增长，长期成本高</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                    <span className="text-sm text-gray-700">算法不透明，无法定制评估逻辑</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                    <span className="text-sm text-gray-700">难以融入企业现有招聘流程</span>
                                </li>
                                <li className="flex items-start">
                                    <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                    <span className="text-sm text-gray-700">厂商锁定风险，数据迁移困难</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </motion.div>
                
                {/* 核心差异化优势 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.2
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">核心差异化优势</h3>
                    
                    <div className="grid md:grid-cols-2 gap-8">
                        {/* 数据主权与隐私安全 */}
                        <motion.div
                            className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                            whileHover={{
                                scale: 1.02
                            }}>
                            <div className="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-shield-alt text-white text-xl"></i>
                            </div>
                            <h4 className="text-xl font-bold text-blue-800 mb-4">数据主权与隐私安全</h4>
                            <p className="text-gray-700 mb-4">简历数据不离开企业内网，100%数据主权，满足银行、政府、军工等敏感行业的数据安全要求。</p>
                            <div className="bg-white p-4 rounded-lg text-sm">
                                <p className="font-medium text-gray-800 mb-2">实际价值对比：</p>
                                <ul className="space-y-2">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-times-circle text-red-500 mt-1 mr-2"></i>
                                        <span><strong>北森等SaaS：</strong>数据存储在厂商云端，存在数据泄露风险</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span><strong>我们的系统：</strong>数据100%存储在企业内部，完全可控</span>
                                    </li>
                                </ul>
                            </div>
                        </motion.div>
                        
                        {/* 成本结构根本性差异 */}
                        <motion.div
                            className="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                            whileHover={{
                                scale: 1.02
                            }}>
                            <div className="w-14 h-14 bg-green-600 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-money-bill-wave text-white text-xl"></i>
                            </div>
                            <h4 className="text-xl font-bold text-green-800 mb-4">成本结构根本性差异</h4>
                            <p className="text-gray-700 mb-4">一次性投入，无需按年付费，避免成本不断增长，不按简历数量、用户数量收费，长期TCO优势显著。</p>
                            <div className="bg-white p-4 rounded-lg text-sm">
                                <p className="font-medium text-gray-800 mb-2">成本对比：</p>
                                <ul className="space-y-2">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-building text-gray-500 mt-1 mr-2"></i>
                                        <span><strong>北森AI面试官：</strong>约50-100万/年（中大型企业）</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-2"></i>
                                        <span><strong>我们的系统：</strong>一次性部署成本 + 定制化服务费</span>
                                    </li>
                                </ul>
                            </div>
                        </motion.div>
                        
                        {/* 完全可定制与透明度 */}
                        <motion.div
                            className="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                            whileHover={{
                                scale: 1.02
                            }}>
                            <div className="w-14 h-14 bg-purple-600 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-sliders-h text-white text-xl"></i>
                            </div>
                            <h4 className="text-xl font-bold text-purple-800 mb-4">完全可定制与透明度</h4>
                            <p className="text-gray-700 mb-4">算法透明，所有评估逻辑公开可见，可按需调整，业务流程适配，可完全按照企业现有流程定制。</p>
                            <div className="bg-white p-4 rounded-lg text-sm">
                                <ul className="space-y-2">
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                        <span>评估模型参数可调整，适应企业特定需求</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                        <span>企业IT团队可完全理解和维护技术栈</span>
                                    </li>
                                    <li className="flex items-start">
                                        <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                        <span>支持本地化部署与私有定制开发</span>
                                    </li>
                                </ul>
                            </div>
                        </motion.div>
                        
                        {/* 企业文化与价值观融入 + 技术栈现代化 */}
                        <motion.div
                            className="bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                            whileHover={{
                                scale: 1.02
                            }}>
                            <div className="w-14 h-14 bg-amber-600 rounded-full flex items-center justify-center mb-6">
                                <i className="fa-solid fa-lightbulb text-white text-xl"></i>
                            </div>
                            <h4 className="text-xl font-bold text-amber-800 mb-4">企业文化与技术创新</h4>
                            <div className="space-y-4">
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">企业文化与价值观融入</h5>
                                    <ul className="text-sm text-gray-700 space-y-1 ml-6 list-disc">
                                        <li>可根据企业文化定制评估维度</li>
                                        <li>针对特定行业深度定制（制造业、金融业等）</li>
                                        <li>完全符合中国企业的管理习惯和思维模式</li>
                                    </ul>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">技术栈现代化与可持续发展</h5>
                                    <ul className="text-sm text-gray-700 space-y-1 ml-6 list-disc">
                                        <li>React 18 + TypeScript，易于二次开发</li>
                                        <li>API开放性，可与企业现有HR系统无缝集成</li>
                                        <li>云原生设计，支持容器化部署，易于扩容和维护</li>
                                    </ul>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </motion.div>
                
                {/* 竞争优势表格 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.4
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">竞争优势对比</h3>
                    
                    <div className="overflow-x-auto">
                        <table className="w-full min-w-[800px] text-sm">
                            <thead>
                                <tr className="bg-indigo-50">
                                    <th className="p-4 text-left font-semibold text-gray-800">维度</th>
                                    <th className="p-4 text-center font-semibold text-gray-800">我们的系统</th>
                                    <th className="p-4 text-center font-semibold text-gray-800">北森/智联等SaaS</th>
                                    <th className="p-4 text-center font-semibold text-gray-800">开源竞品</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                    <td className="p-4 font-medium text-gray-800">数据安全</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 完全本地化</td>
                                    <td className="p-4 text-center font-bold text-red-600">🔴 存储在厂商云端</td>
                                    <td className="p-4 text-center font-bold text-yellow-600">🟡 需自行保障</td>
                                </tr>
                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                    <td className="p-4 font-medium text-gray-800">成本模式</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 一次性投入</td>
                                    <td className="p-4 text-center font-bold text-red-600">🔴 年费模式</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 免费但需定制</td>
                                </tr>
                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                    <td className="p-4 font-medium text-gray-800">可定制性</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 完全开源可改</td>
                                    <td className="p-4 text-center font-bold text-red-600">🔴 配置化有限</td>
                                    <td className="p-4 text-center font-bold text-yellow-600">🟡 需技术能力</td>
                                </tr>
                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                    <td className="p-4 font-medium text-gray-800">部署灵活性</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 私有化部署</td>
                                    <td className="p-4 text-center font-bold text-red-600">🔴 只能云端</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 私有化部署</td>
                                </tr>
                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                    <td className="p-4 font-medium text-gray-800">技术支持</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 专业定制服务</td>
                                    <td className="p-4 text-center font-bold text-yellow-600">🟡 标准技术支持</td>
                                    <td className="p-4 text-center font-bold text-red-600">🔴 社区支持</td>
                                </tr>
                                <tr className="hover:bg-gray-50 transition-colors">
                                    <td className="p-4 font-medium text-gray-800">功能完整性</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 全流程覆盖</td>
                                    <td className="p-4 text-center font-bold text-green-600">🟢 功能丰富</td>
                                    <td className="p-4 text-center font-bold text-red-600">🔴 功能基础</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </motion.div>
                
                {/* 目标客户定位 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.6
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">精准的目标客户定位</h3>
                    
                    <div className="grid md:grid-cols-2 gap-8">
                        <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl">
                            <div className="flex items-center mb-4">
                                <div className="bg-blue-100 p-3 rounded-full mr-4">
                                    <i className="fa-solid fa-building text-blue-600 text-xl"></i>
                                </div>
                                <h4 className="text-xl font-bold text-blue-800">政府与国企客户</h4>
                            </div>
                            <div className="space-y-4">
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                    <p className="text-sm text-gray-700">数据安全要求极高，不能使用外部云服务，对隐私保护有严格规定</p>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                    <p className="text-sm text-gray-700">提供符合等保要求的本地化解决方案，数据100%留存企业内部，满足合规需求</p>
                                </div>
                            </div>
                        </div>
                        
                        <div className="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
                            <div className="flex items-center mb-4">
                                <div className="bg-green-100 p-3 rounded-full mr-4">
                                    <i className="fa-solid fa-industry text-green-600 text-xl"></i>
                                </div>
                                <h4 className="text-xl font-bold text-green-800">制造业与传统企业</h4>
                            </div>
                            <div className="space-y-4">
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                    <p className="text-sm text-gray-700">希望拥有自主可控的招聘系统，预算有限，追求长期成本效益</p>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                    <p className="text-sm text-gray-700">一次投入，长期使用，无厂商依赖，可根据企业流程定制开发</p>
                                </div>
                            </div>
                        </div>
                        
                        <div className="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl">
                            <div className="flex items-center mb-4">
                                <div className="bg-purple-100 p-3 rounded-full mr-4">
                                    <i className="fa-solid fa-line-chart text-purple-600 text-xl"></i>
                                </div>
                                <h4 className="text-xl font-bold text-purple-800">中型成长企业</h4>
                            </div>
                            <div className="space-y-4">
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                    <p className="text-sm text-gray-700">SaaS成本随规模增长而快速上升，招聘需求波动大，需要灵活扩展</p>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                    <p className="text-sm text-gray-700">固定成本投入，支持业务快速扩张，无用户数量和使用量限制</p>
                                </div>
                            </div>
                        </div>
                        
                        <div className="bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl">
                            <div className="flex items-center mb-4">
                                <div className="bg-amber-100 p-3 rounded-full mr-4">
                                    <i className="fa-solid fa-flask text-amber-600 text-xl"></i>
                                </div>
                                <h4 className="text-xl font-bold text-amber-800">技术导向企业</h4>
                            </div>
                            <div className="space-y-4">
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                    <p className="text-sm text-gray-700">希望深度定制和技术掌控，对系统扩展性和API有较高要求</p>
                                </div>
                                <div>
                                    <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                    <p className="text-sm text-gray-700">开源透明，支持二次开发，提供完整API接口，可与现有系统无缝集成</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </motion.div>
                
                {/* 营销话术建议 */}
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 30
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6,
                        delay: 0.8
                    }}
                    viewport={{
                        once: true
                    }}
                    className="bg-white rounded-2xl shadow-xl p-8">
                    <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">营销话术建议</h3>
                    
                    <div className="bg-gradient-to-r from-indigo-50 to-purple-50 p-6 rounded-xl mb-8">
                        <h4 className="text-xl font-bold text-indigo-800 mb-4 text-center">核心卖点</h4>
                        <p className="text-center italic text-gray-700">"在数据安全和成本可控的前提下，提供与大厂SaaS同等AI能力的私有化招聘解决方案"</p>
                    </div>
                    
                    <div className="grid md:grid-cols-3 gap-6">
                        <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                            <h4 className="font-semibold text-gray-800 mb-4">差异化表达一</h4>
                            <div className="space-y-3">
                                <div className="flex items-start">
                                    <span className="text-red-500 font-medium mr-2">❌</span>
                                    <span className="text-gray-600">"我们也有AI能力"</span>
                                </div>
                                <div className="flex items-start">
                                    <span className="text-green-500 font-medium mr-2">✅</span>
                                    <span className="text-gray-800 font-medium">"我们让您拥有自己的AI招聘系统"</span>
                                </div>
                            </div>
                        </div>
                        
                        <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                            <h4 className="font-semibold text-gray-800 mb-4">差异化表达二</h4>
                            <div className="space-y-3">
                                <div className="flex items-start">
                                    <span className="text-red-500 font-medium mr-2">❌</span>
                                    <span className="text-gray-600">"功能很强大"</span>
                                </div>
                                <div className="flex items-start">
                                    <span className="text-green-500 font-medium mr-2">✅</span>
                                    <span className="text-gray-800 font-medium">"数据永不出企业，成本完全可控"</span>
                                </div>
                            </div>
                        </div>
                        
                        <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                            <h4 className="font-semibold text-gray-800 mb-4">差异化表达三</h4>
                            <div className="space-y-3">
                                <div className="flex items-start">
                                    <span className="text-red-500 font-medium mr-2">❌</span>
                                    <span className="text-gray-600">"可以定制"</span>
                                </div>
                                <div className="flex items-start">
                                    <span className="text-green-500 font-medium mr-2">✅</span>
                                    <span className="text-gray-800 font-medium">"源码完全开放，按需深度改造"</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}